<!-- views/sales/commission/components/CommissionStats.vue -->
<template>
  <el-row :gutter="16" class="stats-row">
    <el-col :xs="24" :sm="6">
      <StatCard
        title="提成总金额"
        :value="stats.totalCommission"
        icon="Money"
        color="#52c41a"
        :trend="stats.commissionTrend"
      />
    </el-col>
    <el-col :xs="24" :sm="6">
      <StatCard
        title="待审核提成"
        :value="stats.pendingCommission"
        icon="Clock"
        color="#fa8c16"
        :trend="stats.pendingCommissionTrend"
      />
    </el-col>
    <el-col :xs="24" :sm="6">
      <StatCard
        title="已发放提成"
        :value="stats.paidCommission"
        icon="Check"
        color="#1890ff"
        :trend="stats.paidCommissionTrend"
      />
    </el-col>
    <el-col :xs="24" :sm="6">
      <StatCard
        title="销售人员数"
        :value="stats.salespersonCount"
        icon="User"
        color="#722ed1"
        :trend="stats.salespersonTrend"
      />
    </el-col>
  </el-row>
</template>

<script setup lang="ts">
import { defineProps } from 'vue'
import StatCard from '@/components/StatCard.vue'

interface CommissionStats {
  totalCommission: number
  pendingCommission: number
  paidCommission: number
  salespersonCount: number
  commissionTrend: number
  pendingCommissionTrend: number
  paidCommissionTrend: number
  salespersonTrend: number
}

const props = defineProps<{
  stats: CommissionStats
}>()
</script>

<style scoped>
.stats-row {
  margin-bottom: 20px;
}
</style>